<!--订单详情-->
<template>
	<div>
		<van-nav-bar
		  title="订单详情"
		  left-arrow
		  @click-left="onClickLeft"
		  :border="false"
		>	
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
          <van-icon name="ellipsis" slot="right" color="#000" size="20"/>
	    </van-nav-bar>	
          
	    <div class="wrap" v-if="detailInfo.ordersState<=2">
			<van-steps :active="active">
			  <van-step>已拍下</van-step>
			  <van-step>已付款</van-step>
			  <van-step>待发货</van-step>
			  <van-step>待收货</van-step>			  
			  <van-step>待评价</van-step>
			</van-steps>	    	
	    </div>

	    <div class="wrap" v-if="detailInfo.ordersState==3">
			<van-steps :active="active">
			  <van-step>已拍下</van-step>
			  <van-step>已付款</van-step>
			  <van-step>已发货</van-step>
			  <van-step>待收货</van-step>			  
			  <van-step>待评价</van-step>
			</van-steps>	    	
	    </div>

	    <div class="wrap" v-if="detailInfo.ordersState==4">
			<van-steps :active="active">
			  <van-step>已拍下</van-step>
			  <van-step>已付款</van-step>
			  <van-step>已发货</van-step>
			  <van-step>交易完成</van-step>			  
			  <van-step>待评价</van-step>
			</van-steps>	    	
	    </div>	
	    
	    <div class="wrap" v-if="detailInfo.ordersState==6">
			<van-steps :active="active">
			  <van-step>已拍下</van-step>
			  <van-step>已付款</van-step>
			  <van-step>已发货</van-step>
			  <van-step>交易完成</van-step>			  
			  <van-step>已评价</van-step>
			</van-steps>	    	
	    </div>	
	    
	    
	    
	    
        <floor27 :detailInfo="detailInfo" 
        	:h="h" :m="m" 
        	v-if="detailInfo.ordersState==1&&isSeller">
        </floor27>
        
        
	    <floor11 :detailInfo="detailInfo" v-if="detailInfo.ordersState==2"></floor11>
	    
	    
	    
	    <floor28 :detailInfo="detailInfo" :receivingTime="receivingTime" 
	    	v-if="detailInfo.ordersState==3"></floor28>
	    
        <floor30 :detailInfo="detailInfo" :evaluateTime="evaluateTime" 
        	v-if="detailInfo.ordersState==4&&isBuyer"></floor30>	   

        <floor31 :detailInfo="detailInfo" :evaluateTime="evaluateTime" 
        	v-if="detailInfo.ordersState==4&&isSeller"></floor31>
        	
        	
        <floor32 :detailInfo="detailInfo" :evaluateTime="evaluateTime" 
        	:isBuyer="isBuyer" :isSeller="isSeller"
        	v-if="detailInfo.ordersState==6"></floor32>        	
        
	    <floor29 v-if="detailInfo.ordersState==3||detailInfo.ordersState==4"></floor29>
	    
	    
	    
        <floor10 :detailInfo="detailInfo" :isBuyer="isBuyer" :isSeller="isSeller"></floor10> 
        
        
		<van-goods-action style="padding: 10px;">
		  <!--<van-goods-action-button @click="link('refund/apply')" type="warning" text="我要退款" style="background: #888;"/>-->
		  <!--<van-goods-action-button type="danger" text="提醒卖家发货" style="background: #ffd440;"/>-->
		  <van-goods-action-button v-if="detailInfo.ordersState==1&&isSeller"
		  	text="关闭交易" style="background: #888;" />
		  <van-goods-action-button  v-if="detailInfo.ordersState==1&&isSeller"
		  	 text="修改价格" style="background: #ffd440;"/>	
		  <van-goods-action-button  v-if="detailInfo.ordersState==2&&isBuyer"
		  	 text="我要退款" style="background: #888;"/>			  	 
		  <van-goods-action-button  v-if="detailInfo.ordersState==2&&isBuyer"
		  	 text="提醒卖家发货" style="background: #ffd440;"/>	
		  <van-goods-action-button  v-if="detailInfo.ordersState==2&&isSeller"
		  	 text="交易关闭" style="background: #888;"/>			  	 
		  <van-goods-action-button  v-if="detailInfo.ordersState==2&&isSeller"
		  	 text="去发货" style="background: #ffd440;"/>
		  	 
		  <van-goods-action-button  v-if="detailInfo.ordersState==3&&isBuyer"
		  	 text="我要退款" style="background: #888;"/>			  	 
		  <van-goods-action-button  v-if="detailInfo.ordersState==3&&isBuyer"
		  	 text="确认收货" style="background: #ffd440;"/>		
		  	 
		  <van-goods-action-button  v-if="detailInfo.ordersState==3&&isSeller"
		  	 text="提醒买家收货" style="background: #ffd440;"/>	
		  	 
		  <van-goods-action-button  v-if="detailInfo.ordersState==4&&isBuyer"
		  	 text="查看钱款去向" style="background: #888;"/>
		  <van-goods-action-button  v-if="detailInfo.ordersState==4&&isBuyer"
		  	 text="评价" style="background: #ffd440;"/>
		  <van-goods-action-button  v-if="detailInfo.ordersState==4&&isSeller"
		  	 text="查看钱款去向" style="background: #888;"/>	
		  <van-goods-action-button  v-if="detailInfo.ordersState==4&&isSeller"
		  	 text="评价" style="background: #ffd440;"/>	
		  	 
		  <van-goods-action-button  v-if="detailInfo.ordersState==6&&isBuyer"
		  	 text="查看钱款去向" style="background: #888;"/>	
		  <van-goods-action-button  v-if="detailInfo.ordersState==6&&isBuyer"
		  	 text="查看评价" style="background: #ffd440;"/>	
		  	 
		  <van-goods-action-button  v-if="detailInfo.ordersState==6&&isSeller"
		  	 text="查看钱款去向" style="background: #888;"/>	
		  <van-goods-action-button  v-if="detailInfo.ordersState==6&&isSeller"
		  	 text="查看评价" style="background: #ffd440;"/>		  	 
		</van-goods-action>	    
	</div>	
</template>

<script>
import Floor10 from '_c/market/floor/floor10.vue'
import Floor11 from '_c/market/floor/floor11.vue'
import Floor27 from '_c/market/floor/floor27.vue'
import Floor28 from '_c/market/floor/floor28.vue'
import Floor29 from '_c/market/floor/floor29.vue'
import Floor30 from '_c/market/floor/floor30.vue'
import Floor31 from '_c/market/floor/floor31.vue'
import Floor32 from '_c/market/floor/floor32.vue'
import {getFun,getTimer} from '@/api/publicFun.js'	 
let publicFun=getFun()		
export default {
	name: 'orderDetail',
	components: {
	    Floor10,Floor11,Floor27,Floor28,Floor29,Floor30,Floor31,Floor32
	},		
	data() {
       return {
       	 isBuyer:false,       // 用于绑定是否是买家
       	 isSeller:false,      // 用于绑定是否是卖家
       	 h:0,                 // 用于绑定待付款时，距离交易关闭的小时数
       	 m:0,                 // 用于绑定待付款时，距离交易关闭的分钟数
       	 receivingTime:{d:0,h:0,m:0}, // 用于绑定距离最晚确认收货的时间      
       	 evaluateTime:{d:0,h:0,m:0}, // 用于绑定距离最晚评价的时间      
         active:0,
         url1:this.$api+'/marketorderservice/api/v1/market/orders',    // 获取订单详情的接口
         ordersId:'',
         userId:'',
         detailInfo:{}      // 绑定订单对象
       }
	},
	methods: {	
       getData(){
       	 let that=this
       	 this.$Axios.Get(this.url1+'/'+this.ordersId+'/'+this.userId)
       	 .then(function(res){
       	 	let timeGobal=getTimer()
			// 计算距离交易关闭的时间差			
			let nowTime=new Date(res.orders.nowTime).getTime()
			let ordersCreateTime=new Date(res.orders.ordersCreateTime).getTime()
			let reduce=timeGobal.paymentTime-(nowTime-ordersCreateTime)/1000
			that.h=Math.floor(reduce/3600)
			that.m=Math.floor((reduce%3600)/60)
			
			if(res.orders.ordersSendTime){
				let ordersSendTime=new Date(res.orders.ordersSendTime).getTime()
				let reduce2=timeGobal.receivingTime-(nowTime-ordersCreateTime)/1000
				that.receivingTime.d=Math.floor(reduce2/86400)
				that.receivingTime.h=Math.floor((reduce2%86400)/3600)
                that.receivingTime.m=Math.floor(((reduce2%86400)%3600)/60)
			}
			if(res.orders.ordersFinishTime){
				let evaluateTime=new Date(res.orders.ordersFinishTime).getTime()
				let reduce3=timeGobal.evaluateTime-(nowTime-evaluateTime)/1000
				that.evaluateTime.d=Math.floor(reduce3/86400)
				that.evaluateTime.h=Math.floor((reduce3%86400)/3600)
                that.evaluateTime.m=Math.floor(((reduce3%86400)%3600)/60)
                //console.log(that.evaluateTime)
			}
			
			
            // 判定是买家还是卖家
       	 	if(res.orders.userId==that.userId){
       	 		that.isBuyer=true
       	 	}
       	 	if(res.orders.suserId==that.userId){
       	 		that.isSeller=true
       	 	} 
       	 	// 判定当前的订单状态
       	 	let ordersState=res.orders.ordersState
			switch(ordersState) {
			     case 1:
			        that.active=0
			        break;
			     case 2:
			        that.active=1
			        break;
			     case 3:
			        that.active=2
			        break;
			     case 4:
			        that.active=3
			        break;
			     case 6:
			        that.active=4
			        break;		        
			}
			that.detailInfo=res.orders	
       	 })
       }
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.ordersId=this.$router.currentRoute.query.ordersId;
		this.userId=this.$router.currentRoute.query.userId;	
		this.getData()
	}
}	
</script>

<style scoped="">
.wrap{padding: 20px 10px 0;}
</style>